'use client'

import { Separator } from "@/components/ui/separator"
import { FileInput, FilePlus2, Files } from "lucide-react"

type AppCreatorProps = {
    type?: string // 'Chatbot' | 'Text Generator' | 'Agent' | 'Workflow'
}

const AppCreator = ({ type = 'Chatbot' }: AppCreatorProps) => {
    const handleCreateBlank = () => {
        console.log('app-creator.handleCreateBlank --------> ')
    }

    const handleCreateFromTemplate = () => {
        console.log('app-creator.handleCreateFromTemplate --------> ')
    }

    const handleImportDSLFile = () => {
        console.log('app-creator.handleImportDSLFile --------> ')
    }

    return (
        <div className="rounded-md bg-slate-200 dark:bg-slate-800 border w-full h-40 flex flex-col space-y-2">
            <div className="px-2 pt-3">
                <h3 className="uppercase text-[12px] text-muted-foreground px-4 py-2">创建智能助手</h3>
                <div
                    className="flex hover:bg-muted-foreground/35 hover:text-blue-500 text-muted-foreground rounded-sm px-4 py-1 cursor-pointer"
                    onClick={handleCreateBlank}
                >
                    <FilePlus2 className="h-4 w-4 mr-2" />
                    {/* <span className="text-[13px] font-medium">Create from Blank</span> */}
                    <span className="text-[13px] font-medium">新建AI助手</span>
                </div>
                <div
                    className="flex hover:bg-muted-foreground/35 hover:text-blue-500 text-muted-foreground rounded-sm px-4 py-1 cursor-pointer"
                    onClick={handleCreateFromTemplate}
                >
                    <Files className="h-4 w-4 mr-2" />
                    {/* <span className="text-[13px] font-medium">Create from Template</span> */}
                    <span className="text-[13px] font-medium">选择模板创建</span>
                </div>
            </div>
            <Separator className="bg-muted-foreground/15" />
            <div className="px-2">
                <div
                    className="flex px-4 py-1 rounded-sm hover:bg-muted-foreground/35 hover:text-blue-500 text-muted-foreground cursor-pointer"
                    onClick={handleImportDSLFile}
                >
                    <FileInput className="h-4 w-4 mr-2" />
                    {/* <span className="text-[13px] font-medium">Import DSL file</span> */}
                    <span className="text-[13px] font-medium">导入文件创建</span>
                </div>
            </div>
        </div>
    )
}

export default AppCreator